<template>
  <div class="finance-management">
    <!-- 搜索栏 -->
    <div class="search-container">
      <el-input
        placeholder="请输入工资月份搜索"
        v-model="searchKeyword"
        prefix-icon="el-icon-search"
        class="search-input"
      ></el-input>
    </div>

    <el-table
      :data="filteredFinanceData"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column
        prop="number"
        label="序号"
        width="100"
      ></el-table-column>
      
      <el-table-column
        prop="payrollmonth"
        label="工资月份"
        width="100"
      ></el-table-column>
      
      <el-table-column
        prop="id"
        label="员工工号"
        width="100"
      ></el-table-column>
      
      <el-table-column
        prop="name"
        label="员工姓名"
        width="100"
      ></el-table-column>
      
      <el-table-column
        prop="departmentid"
        label="部门编号"
        width="100"
      ></el-table-column>
      
      <el-table-column
        prop="department"
        label="部门名称"
        width="100"
      ></el-table-column>
      
      <el-table-column
        prop="salary"
        label="应发工资"
        width="100"
      ></el-table-column>
      
      <el-table-column
        prop="fine"
        label="扣除工资"
        width="100"
      ></el-table-column>
      
      <el-table-column
        prop="realsalary"
        label="实发工资"
        width="100"
      ></el-table-column>
      

    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
import service from '../utils/request';
const instance = axios.create({
  baseURL: 'http://localhost:9084', // 设置基础 URL
  timeout: 10000
});

export default {
  data() {
    return {
      financeData: [],
      dialogVisible: false,
      editForm: {},
      editIndex: -1,
      searchKeyword: '',
      loading: false
    };
  },
  computed: {
    filteredFinanceData() {
      if (!this.searchKeyword) return this.financeData;
      
      const keyword = this.searchKeyword.toLowerCase();
      return this.financeData.filter(item => {
        // 对每个字段进行严格的空值检查
        const payrollMonth = item.payrollmonth !== null && item.payrollmonth !== undefined 
          ? String(item.payrollmonth).toLowerCase() 
          : '';
          
        const name = item.name !== null && item.name !== undefined 
          ? String(item.name).toLowerCase() 
          : '';
          
        const id = item.id !== null && item.id !== undefined 
          ? String(item.id).toLowerCase() 
          : '';
          
        return payrollMonth.includes(keyword) || 
               name.includes(keyword) || 
               id.includes(keyword);
      });
    }
  },
  mounted() {
    this.fetchFinance();
  },
  methods: {
    async fetchFinance() {
      try {
        this.loading = true;
        const response = await instance.get('/api/finance'); 
        if (response.status === 200) {
          console.log('获取的财务数据:', response.data);
          // 检查第一条数据的结构
          if (response.data.length > 0) {
            console.log('第一条数据结构:', response.data[0]);
          }
          this.financeData = response.data;
        } else {
          throw new Error(`请求失败，状态码: ${response.status}`);
        }
      } catch (error) {
        console.error('获取工资信息失败:', error.message);
        this.$message.error('获取工资信息失败');
      } finally {
        this.loading = false;
      }
    },
    async searchFinance() {
      if (!this.searchKeyword) {
        this.fetchFinance();
        return;
      }
      try {
        this.loading = true;
        const response = await instance.get(`/api/finance/search?keyword=${this.searchKeyword}`);
        if (response.status === 200) {
          this.financeData = response.data;
        } else {
          throw new Error(`请求失败，状态码: ${response.status}`);
        }
      } catch (error) {
        console.error('搜索工资信息失败:', error.message);
        this.$message.error('搜索工资信息失败');
      } finally {
        this.loading = false;
      }
    },

  }
};
</script>

<style scoped>
.finance-management {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.search-input {
  width: 300px;
  margin: 0 auto;
  margin-right: 10px; /* 为按钮留出间距 */
}

.el-table {
  margin-top: 15px;
  background-color: white;
}

.el-table__header {
  background-color: #f8f9fa;
}

.el-popover {
  max-width: 300px;
}
</style>

